<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.css" rel="stylesheet"/>
    <link href="css/style.css" rel="stylesheet"/>
</head>
<body>
    <header class="mui-bar mui-bar-nav">
      <a id="user" class="mui-icon mui-icon-person"></a>
      <h1 class="mui-title">北斗智慧派车</h1>
    </header>
    
    <!-- 主页面内容容器 -->
    <div class="mui-content">
 		<div id="slider" class="mui-slider">
			<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<a class="mui-control-item" href="#item1mobile">
					今天
				</a>
				<a class="mui-control-item" href="#item2mobile">
					明天
				</a>
				<a class="mui-control-item" href="#item3mobile">
					后天
				</a>
			</div>
			<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4">
				
			</div>
			<div class="mui-slider-group">
				<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
					<!--<div id="scroll1" class="mui-scroll-wrapper">	    	
						<div class="mui-scroll">
							
						</div>
					</div>-->
				</div>
				<div id="item2mobile" class="mui-slider-item mui-control-content">
					<!--<div id="scroll2" class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<div class="mui-loading">
								<div class="mui-spinner">
								</div>
							</div>
						</div>
					</div>-->
				</div>
				<div id="item3mobile" class="mui-slider-item mui-control-content">
					<!--<div id="scroll3" class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<div class="mui-loading">
								<div class="mui-spinner">
								</div>
							</div>
						</div>
					</div>-->
				</div>
			</div>
		</div>
	</div>  
	<!--<script src="./js/mui.pullToRefresh.js"></script>
	<script src="./js/mui.pullToRefresh.material.js"></script>-->
	<script>
		mui.init({
			gestureConfig:{
				doubletap:true
			}
		});
		
		(function($) {
			$('.mui-scroll-wrapper').scroll({
				indicators: true, //是否显示滚动条
				scrollY: true, //是否竖向滚动
				startY: 0, //初始化时滚动至y
				deceleration:0.0006, //阻尼系数,系数越小滑动越灵敏
 				bounce: true //是否启用回弹
			});
			
			var userBtn = document.getElementById("user");
			//监听点击事件
			userBtn.addEventListener("tap",function () {			
				mui.openWindow({
					    url:'./webview/user.html',
					    id:'user.html',
					    styles:{
					      top:'0px', //新页面顶部位置
					      bottom:'0px', //新页面底部位置
					      width:'100%', //新页面宽度，默认为100%
					      height:'100%', //新页面高度，默认为100%
					    },
					    createNew:false,//是否重复创建同样id的webview，默认为false:不重复创建，直接显示
					    show:{
					      autoShow:true,//页面loaded事件发生后自动显示，默认为true
					      aniShow:'slide-in-right',//页面显示动画，默认为”slide-in-right“；
					    },
					    waiting:{
					      autoShow:false,//自动显示等待框，默认为true
					      title:'正在加载...'//等待对话框上显示的提示内容
					    }
					})
			});
	
		})(mui);
		
		
	</script>
</body>
</html>